<template>
	<div>
		<city-header></city-header>
		<city-list
		 :cities='cities'
		 :hotCities='hotCities'
		></city-list>
	</div>
</template>
<script type="text/javascript">
	import CityHeader from './pages/Header.vue'
	import CityList from './pages/List.vue'

	export default {

		components:{
			CityHeader,
			CityList
		},
		data () {
			return {
				cities:[],
				hotCities:[]
			}
		},
		methods:{
			getCity(){
				this.$http.get("/api/city.json")
				.then((res)=>{
					res = res.data;
					const data = res.data;
					this.cities =data.cities;
					this.hotCities = data.hotCities
				})
			}
		},
		mounted () {
			this.getCity()
		}
	}
</script>